<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!--
  <script>
    window.onload = function () {
      let btn = document.querySelector("button");
      btn.addEventListener("click", function () {
        alert(`等页面加载完我再执行`);
      });
    };  这种方法已经过时的了
  </script> -->
  <script>
    window.addEventListener("load", function () {
      let btn = document.querySelector("button");
      btn.addEventListener("click", function () {
        alert(`等页面加载完我再执行`);
      });
    });
    window.addEventListener("load", function () {
      let btn = document.querySelector("button");
      btn.addEventListener("click", function () {
        alert(`哈哈，我又来了`);
      });
    });
    document.addEventListener("DOMContentLoaded", function () {
      alert(`先跳出DomContentLoaded先`);
    });
  </script>
  <!-- 总结:
    1.onload的方法时，等页面加载完成后再执行js的代码
    2.window.onload只能使用一次，会以最后一次为准
    3.addEventListener没有限制
    onload与DOMContentLoaded的区别:
      onload等所有的内容都加载完后，再执行
      DOMContentLoaded则只要Dom加载就开始执行，不包括图片,flash,样式等内容
   -->
  <button>点击吧</button>
</body>

</html>